<template>
  <div class="tkbox cjresult_tkbox underlinebox clmcenter">
    <div class="tkcontainer clmcenter">
      <div class="tk_container clmstart">
        <p class="title">恭喜您中奖</p>
        <div class="tk_infobox clmcenter">
          <div class="jpbox">
            <img :src="jpimg" class="jpimg" />
            <div class="jpdesbox">
              <p>恭喜您抽中{{ jpname }}</p>
              <p>可在“我的信息”中查看记录</p>
            </div>
          </div>
          <div class="gettipsbox">
            <p>
              请输入您的牌照后<br />
              找门店工作人员进行领取
            </p>
          </div>
          <div class="cardpipt">
            <img src="@/assets/img/icon-cardp.png" class="icon-cardp" />
            <input
              type="text"
              placeholder="请输入您的车牌号"
              v-model="cardp"
              maxlength="7"
            />
          </div>
          <!-- <div class="maxtipsbox" v-show="maxtipshow">
            <p>
              *对不起，您已输入错误{{ errortimes }}次{{
                errortimes < 3 ? "" : "，失去领奖资格"
              }}
            </p>
          </div> -->
        </div>
      </div>
      <div class="cfmbtnbox" @click="submitUserCardp">
        <img src="@/assets/img/btn_next.png" />
      </div>
      <div class="msgtip">
        <p>注：</p>
        <p>
          1、车牌号最多输入3次，请输入属于您个人的正确车牌号<br />
          2、不能盗用或者乱写车牌号，若经举报，个人承担其法律责任，和主办方无关<br />
          3、主办方核查，不是骑士或者车牌号盗用或者乱写，主办方有权取消其中奖资格
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  props: {
    jpname: {
      type: String,
      default: "",
    },
    jpimg: {
      type: String,
      default: "",
    },
    wid: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      cardp: "", // 兑换车牌号
      //   maxtipshow: false, // 车牌输入次数超限
      //   errortimes: 0, // 车牌号输入错误次数
    };
  },
  methods: {
    //提交车牌号
    submitUserCardp() {
      // 验证车牌正则
      let carExp =
        /(^[京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云渝藏陕甘青宁新使][A-Za-z][0-9a-zA-Z]{5}$)/;
      if (this.cardp == "") {
        return Toast("请输入您的车牌号");
      }
      if (!carExp.test(this.cardp)) {
        return Toast("请输入正确的车牌号");
      }
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      this.$http
        .post("/saveMotorCode", {
          motor_code: this.cardp,
          wid: this.wid,
        })
        .then((res) => {
          Toast.clear();
          if (res.data.code == 200) {
            //提交成功
            this.$emit("subCall", res.data.data.qrcode);
          } else {
            Toast(res.data.msg);
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
//中奖提示：线下核销
.underlinebox {
  .tkcontainer {
    .tk_container {
      height: 686px;
      background: url("@/assets/img/tkbox.png") no-repeat;
      background-size: 100% 100%;
      .tk_infobox {
        height: 490px;
        // border: 1px solid blue;
        .gettipsbox {
          margin-top: 1rem;
          p {
            text-align: center;
            font-size: 2rem;
            font-weight: bolder;
            color: #000000;
          }
        }
        .cardpipt {
          position: relative;
          width: 494px;
          height: 90px;
          border: 3px solid #707070;
          box-sizing: border-box;
          border-radius: 0.8rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          overflow: hidden;
          margin-top: 1rem;
          img {
            width: 18%;
          }
          input {
            width: calc(100% - 18%);
            height: 100%;
            font-size: 2rem;
            background: none;
            color: #000000;
          }
          //修改输入框提示文字的颜色
          input::input-placeholder {
            color: #000000;
          }
          input::-webkit-input-placeholder {
            //兼容WebKit browsers（Chrome的内核）
            color: #000000;
          }
          input::-moz-placeholder {
            //Mozilla Firefox 4 to 18
            color: #000000;
          }
          input::-moz-placeholder {
            //Mozilla Firefox 19+
            color: #000000;
          }
          input::-ms-input-placeholder {
            //Internet Explorer 10+
            color: #000000;
          }
        }
        .methodipt {
          margin-top: 3rem;
        }
        .maxtipsbox {
          text-align: center;
          margin-top: 0.5rem;
          p {
            font-size: 1.5rem;
            color: #e60012;
          }
        }
      }
    }
  }
}
</style>
